<template>
  <el-row class="screen-bar">
    <el-row class="tab-wrapper">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <template v-for="item in tabList">
          <el-tab-pane
            :key="item.keyword"
            :label="item.keyword +  '(' + item.count + ')'"
            :name="item.keyword"
          ></el-tab-pane>
        </template>
      </el-tabs>
    </el-row>
    <el-row>
      <div v-if="selectScreen">
        <el-date-picker v-model="value" type="month" placeholder="选择月"></el-date-picker>
      </div>
      <div v-if="radioScreen">
        <el-radio-group v-model="radio" size="small" @change="handleChange">
          <el-radio-button label="0">全部</el-radio-button>
          <el-radio-button label="1">有订金</el-radio-button>
          <el-radio-button label="2">无订金</el-radio-button>
        </el-radio-group>
      </div>
    </el-row>
  </el-row>
</template>
<script>
export default {
  props: {
    tabList: {
      type: Array,
    },
    selectScreen: {
      type: Boolean,
      default: false,
    },
    radioScreen: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      activeName: "全部",
      tabPosition: "left",
      radio: "0",
      value: new Date(),
    };
  },
  created() {},
  methods: {
    handleClick(tab, event) {
      this.$emit("changeState", tab.index);
    },
    handleChange(tab, event) {
      this.$emit("changeRadio", this.radio);
    },
  },
};
</script>>
<style lang="scss" scoped>
.screen-bar {
  align-items: center;
  .tab-wrapper {
    padding: 18px 0;
  }
}
</style>
<style lang="scss">
// 修改element-ui样式，不能增加scoped属性
//筛选
.el-tabs__header {
  margin-bottom: 0;
}
.el-tabs__nav-wrap::after {
  display: none;
}
//右侧筛选
.el-radio-button--small .el-radio-button__inner {
  padding: 6px 15px;
}
</style>
